<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" href="css/index.css" rel="stylesheet">
    <link type="text/css" href="css/download (1)/font_6scgcii2lwt/iconfont.css" rel="stylesheet">
    <title>SKY</title>

</head>

<body>
    <!-- 导航栏 -->
    <div id="nav">
        <div class="nav-bar">
            <!-- logo -->
            <div class="nav-logo">
                <a class="logo" href="index.html">
                    <img src="../final/images/tb.gif" height="56">
                </a>
            </div>
            <div class="btn edit-btn">
                <a target="_blank" href="edit.html">
                    写文章
                </a>
            </div>
            <!-- 未登录时显示登陆、注册 -->
            <!-- <div class="btn login">
                <a href="login.html">登陆</a>
            </div>
            <a class="btn register" href="#">
                <span>注册</span>
            </a> -->
            <div class="user">
                <a class="user-img" href="person.html">
                    <img src="images/lb-1.jpg">
                </a>
            </div>

            <div class="nav-search">
                <span class="inp">
                    <input type="text" size="12" placeholder="文章、专栏" autocomplete="off">
                </span>
                <span class="srh-btn">
                    <input type="submit">
                </span>
            </div>
            <ul class="nav-ul nav-content">
                <li class="nav-item1">
                    <a href="blog.html" traget="_blank">
                        <span class="item-name">文章</span>
                    </a>
                </li>
                <li class="nav-item2">
                    <a href="#" traget="_blank">
                        <span class="item-name">专题</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 图片轮播 -->
    <div class="box" id="lb-box">
        <div class="inner">
            <ul>
                <li><a href="#"><img src="images/lb-1.jpg"></a></li>
                <li><a href="#"><img src="images/lb-2.jpg"></a></li>
                <li><a href="#"><img src="images/lb-3.jpg"></a></li>
                <li><a href="#"><img src="images/lb-4.jpg"></a></li>
                <li><a href="#"><img src="images/lb-5.jpg"></a></li>
            </ul>
            <ol class="bar">

            </ol>
            <div id="arr">
                <span id="left">&lt;</span>
                <span id="right">&gt;</span>
            </div>
        </div>
        <script>
            function my$(id) {
                return document.getElementById(id);
            }

            //获取各元素，方便操作
            var box = my$("lb-box");
            var inner = box.children[0];
            var ulObj = inner.children[0];
            var list = ulObj.children;
            var olObj = inner.children[1];
            var arr = my$("arr");
            var imgWidth = inner.offsetWidth;
            var right = my$("right");
            var pic = 0;
            //根据li个数，创建小按钮
            for (var i = 0; i < list.length; i++) {
                var liObj = document.createElement("li");

                olObj.appendChild(liObj);
                liObj.innerText = (i + 1);
                liObj.setAttribute("index", i);

                //为按钮注册mouseover事件
                liObj.onmouseover = function () {
                    //先清除所有按钮的样式

                    for (var j = 0; j < olObj.children.length; j++) {
                        olObj.children[j].removeAttribute("class");
                    }
                    this.className = "current";
                    pic = this.getAttribute("index");
                    animate(ulObj, -pic * imgWidth);
                }

            }


            //设置ol中第一个li有背景颜色
            olObj.children[0].className = "current";
            //克隆一个ul中第一个li,加入到ul中的最后=====克隆
            ulObj.appendChild(ulObj.children[0].cloneNode(true));

            var timeId = setInterval(onmouseclickHandle, 3000);
            //左右焦点实现点击切换图片功能
            box.onmouseover = function () {
                arr.style.display = "block";
                clearInterval(timeId);
            };
            box.onmouseout = function () {
                arr.style.display = "none";
                timeId = setInterval(onmouseclickHandle, 2000);
            };

            right.onclick = onmouseclickHandle;
            function onmouseclickHandle() {
                //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
                //所以,如果用户再次点击按钮,用户应该看到第二个图片
                if (pic == list.length - 1) {
                    //如何从第6个图,跳转到第一个图
                    pic = 0;//先设置pic=0
                    ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
                }
                pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
                animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
                //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
                if (pic == list.length - 1) {
                    //第五个按钮颜色干掉
                    olObj.children[olObj.children.length - 1].className = "";
                    //第一个按钮颜色设置上
                    olObj.children[0].className = "current";
                } else {
                    //干掉所有的小按钮的背景颜色
                    for (var i = 0; i < olObj.children.length; i++) {
                        olObj.children[i].removeAttribute("class");
                    }
                    olObj.children[pic].className = "current";
                }
            }
            left.onclick = function () {
                if (pic == 0) {
                    pic = list.length - 1;
                    ulObj.style.left = -pic * imgWidth + "px";
                }
                pic--;
                animate(ulObj, -pic * imgWidth);
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                //当前的pic索引对应的按钮设置颜色
                olObj.children[pic].className = "current";
            };

            //设置任意的一个元素,移动到指定的目标位置
            function animate(element, target) {
                clearInterval(element.timeId);
                //定时器的id值存储到对象的一个属性中
                element.timeId = setInterval(function () {
                    //获取元素的当前的位置,数字类型
                    var current = element.offsetLeft;
                    //每次移动的距离
                    var step = 10;
                    step = current < target ? step : -step;
                    //当前移动到位置
                    current += step;
                    if (Math.abs(current - target) > Math.abs(step)) {
                        element.style.left = current + "px";
                    } else {
                        //清理定时器
                        clearInterval(element.timeId);
                        //直接到达目标
                        element.style.left = target + "px";
                    }
                }, 10);
            }


        </script>

    </div>
    <!-- 分类 -->
    <div class="classification">
        <div class="bt">
            <h1>分类</h1>
        </div>
        <div class="tiles">
            <div>
                <div class="col">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <div class="c-box"></div>
                </div>
                <div class="col">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <div class="c-box"></div>
                </div>
                <div class="col">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <div class="c-box"></div>
                </div>
            </div>
            <div>
                <div class="col">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <div class="c-box"></div>
                </div>
                <div class="col">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <div class="c-box"></div>
                </div>
                <div class="col">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <div class="c-box"></div>
                </div>
            </div>

        </div>
    </div>
    <!-- 最新博客 -->
    <div id="newlist">
        <div class="title">
            <h1>最新博客</h1>
        </div>
        <ul class="note-list">
            <li class="list-item">
                <a class="a-img" href="blog.html" target="_blank">
                    <img src="images/lb-5.jpg">
                </a>
                <div class="content">
                    <a class="title" target="_blank" href="blog.html">网页设计</a>
                    <p class="c-body">
                        网页设计（web design，又称为Web UI design，WUI
                        design，WUI）...
                    </p>
                    <div class="bar">
                        <span class="view">
                            <i class="iconfont icon-see"></i>
                            4.5k
                        </span>
                        <a class="unmae" target="_blank" href="person.html">
                            岁辰凡年
                        </a>
                        <a target="_blank" href="#">
                            <i class="iconfont icon-groupcopy6"></i>
                            1
                        </a>
                        <span>
                            <i class="iconfont icon-home_ico_like-"></i>
                            19
                        </span>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</body>

</html>